body{
    margin: 0 auto;
    background-color:#fff;

}
li{
    list-style: none;
}
a{
    text-decoration: none;
}


/*  导航栏 搜索栏*/
.top{
    width: 100vw;
    height: 13.33vw;
    background-color:#f6f6f6;
    line-height: 13.33vw;
    border-bottom: 1px solid #ccc;
}

.searchBar{
    position:relative;
    width:80vw;
    height: 8vw;
    text-decoration: none;
    float: left;
    margin-top: 1.33vw;

}
.magnifier{
    position:absolute;
    width: 6.67vw;
    height: 6.67vw;
    top: 1.5vw;
    left: 7.33vw;
}
.magnifier img{
    width: 100%;
    height: 100%;
}
.searchBar input{
    border-radius: 4vw;
    margin-left: 5.33vw;
    width:100%;
    height: 8vw;
    text-decoration: none;
    outline: none;
    border: none;
    text-indent: 10.33vw;
    font-size: 4.8vw;
    color:#666;
    box-shadow:0 6px 4px rgba(0,0,0,0.1);
}

.mine{
    float: right;
    width: 11.73vw;
    height: 11.73vw;
    margin-top:0.8vw;
    margin-right: 0.8vw;
    /*background:url(../images/wd.png);*/
}

.mine img{
    width: 100%;
    height: 100%;
}

/*  广告栏 轮番图*/
.advertise{
    width: 100vw;
    height: 40vw;
    overflow: hidden;
    /*    溢出隐藏！*/
    margin-bottom: 2.67vw;

}
.advertise ul{
    position:relative;
    left:-100vw;
    padding: 0;
    margin: 0;
    width: 1000%;
    display: flex;
    /* 添加 弹性布局*/
    flex-flow: row nowrap;
/*   设置主中为 X  不换行！ */
}
.advertise ul li{
    padding: 0;
    margin: 0;
    width: 100vw;
    height: 40vw;
}


.advertise ul li img{
    width: 100%;
    height: 100%;
}

/*  smallModule  小模块*/
.smallModule{
    width: 100vw;
    height: 17.07vw;
    /*    64px*/
    background:#ffffff;
    border-radius: 2.13vw;
    margin:0.27vw;
    overflow: hidden;
}

.smallModule ul{
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
}

.smallModule ul li{
    padding: 0;
    margin: 0;
    width: 20%;
    height: 100%;
    background:#ffffff;
    float: left;
}
.smallModule ul li a{
    width: 100%;
    height: 100%;
    text-align: center;
    margin-top: 1.33vw;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}
.smallModule ul li a img{
    width: 50%;
    height: 50%;
    margin-bottom: 2.67vw;
}
.smallModule ul li a span{
    width: 100%;
    height: 50%;
    color: #222;
    font-size:2.13vw
}

/*<!-- 副导航栏  Secondary navigation bar-->*/
.secondaryNavigationBar0{
    background-color: white;
}

.secondaryNavigationBar{
    width: 100vw;
    height: 23.47vw;
    /*    64px*/
    /*background: #a8ffa9;*/
    background:-webkit-linear-gradient(left,#fa5a55,#fa984d);
    border-radius: 2.13vw  2.13vw 0  0;
    margin:0.27vw 0 0.8vw 0;
    overflow: hidden;
    display: flex;
    flex-flow: row nowrap;
    line-height:10.67vw;
    color: #fff;
    font-size: 3.73vw;
}
.left{
    position: relative;
    flex:1;
    text-align:center;

}

.left img{
    position:absolute;
    width: 100%;
    bottom: 0;
    left: 0;
}
.mid{
    flex:1;
    display: flex;
    flex-flow: column nowrap;
    box-sizing: border-box;
    border-right: 0.27vw solid #fff;
    border-left: 0.27vw solid #fff;
    text-align: center;
}
.mid div{
    flex:1;
    box-sizing: border-box;

}

.mid div:nth-child(1){
    border-bottom: 0.27vw solid #fff;

}

.right{
    flex:1;
    display: flex;
    flex-flow: column nowrap;
    text-align: center;
}
.right div{
    flex:1;
    box-sizing: border-box;

}

.right div:nth-child(1){
    border-bottom: 0.27vw solid #fff;

}

.secondaryNavigationBar:nth-child(2){
    background:-webkit-linear-gradient(left,#4b90ed,#53bced);
    border-radius: 0;

}

.secondaryNavigationBar:nth-child(3){
    background:-webkit-linear-gradient(left,#34c2a9,#6cd55a);
    border-radius:  0  0 2.13vw  2.13vw;


}


/*<!-- 副模块  submodule-->*/
.submodule{
    width: 100vw;
    height: 30.93vw;
    background-color:#fff;
    border-radius:2.13vw;
}

.submodule ul{
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    /*  设置侧轴上居中*/
    justify-content: center;
    /* 设置主轴居中*/
    width: 100%;
    height: 100%;
    margin:0;
    padding: 0;
}

.submodule ul li{
    flex: 20%;
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    /*  设置侧轴上居中*/
    justify-content: center;
    box-sizing: border-box;
    font-size:3.2vw;
}
.submodule ul li a{
    flex: 1;
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    /*  设置侧轴上居中*/
    justify-content: center;
    box-sizing: border-box;
    font-size:3.2vw;
    color: #222;
}


.submodule ul li img{
     width: 50%;
     height: 50%;
}

/*Welfare  更多福利*/
.Welfare{
    width: 100vw;
    height: 13.33vw;
    margin:0 auto;
    display: flex;
    flex-flow: row nowrap;
    background-color: #ffffff;
    justify-content: space-between;
    align-items: center;
}

.tp{
    Width:21.33vw;
    height: 6.67vw;
    margin:auto 0;

}

.tp img{
    width: 100%;
    height: 100%;
    margin:auto 0;

}
.right0{
    box-sizing: border-box;
    margin: auto;
    width:21.33vw;
    height:6.67vw;
    border-radius:4vw;
    text-align: center;
    line-height: 6.67vw;
    color:#fff;
    font-size:2.13vw;
    background:-webkit-linear-gradient(left,#ff506d,#ff6bc5);

}

/*  商品*/
.main{
    box-sizing: border-box;
    /* css3的盒子模型*/
    width: 100vw;
    margin:0 auto;
    display:flex;
    flex-flow: column nowrap;
}

.commodity{
    display:flex;
    box-sizing: border-box;
    width: 100%;
    margin:0 auto;
    flex-flow: row wrap;
    border-bottom: 0.27vw solid #eeeeee;
}

.box2{
    flex: 1;
}
.box2 img{
    width: 100%;
    height: 100%;
}

.commodity .box2:nth-of-type(1){
    border-right: 0.27vw solid #eeeeee;
}

/*backToTop  返回顶部*/
.backToTop{
    position: fixed;
    /*  添加固定定位！*/
    width: 5.33vw;
    height: 5.33vw;
    z-index: 5;
    bottom: 8vw;
    right:2.67vw;
    visibility:hidden;
}

.backToTop img{
    width: 100%;
    height: 100%;
    margin : auto;
}